<template>
  <div>
    <p>-----------------------</p>
    <!-- 显示用户的token的网站的名称 -->
    <div>用户的token: {{ $store.state.user.token }}</div>
    <div>网站的名称：{{ $store.state.setting.name }}</div>

    <div>getters快捷访问：{{ token }}</div>
    <div>getters快捷访问：{{ name }}</div>

    <button @click="updateToken">更新子模块的token</button>
    <!-- <button @click="test">调用子模块的mutations</button> -->
  </div>
</template>

<script>
import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
export default {
  computed: {
    ...mapGetters(['token', 'name'])
  },
  methods: {
    // updateToken () {
    // 方案1：直接调用-带上模块的属性名路径
    //   this.$store.commit('user/updateToken')
    // }

    // 方案2：辅助函数-带上模块的属性名路径
    // ...mapMutations(['user/updateToken']),
    // test () {
    //   this['user/updateToken']()
    // },

    // 方案3： createNamespacedHelpers  创建基于某个命名空间辅助函数
    ...mapMutations(['updateToken'])
  }
}
</script>

<style>
</style>